<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="box">
    <template v-if="isShow">
        <div>1</div>
        <div>2</div>
    </template>

    <ul>
        <li v-for="item,index in dataList">
            {{item.title}}
            <b v-if="item.state === 0">待付款</b>
            <b v-else-if="item.state === 1">付款中</b>
            <b v-else-if="item.state === 2">已付款</b>
            <b v-else-if="item.state === 3">已取消</b>
        </li>
    </ul>
</div>
</body>
<script>
    var obj = {
        data() {
            return {
                isShow:true,
                dataList: [
                    {
                        title: "手机",
                        state: 0
                    },
                    {
                        title: "手机",
                        state: 1
                    },
                    {
                        title: "手机",
                        state: 2
                    },
                    {
                        title: "手机",
                        state: 3
                    }
                ]
            }
        },

    }
    var app = Vue.createApp(obj).mount("#box")
</script>
</html>